<template>
  <div>
    <el-dialog
      title="授权权限组"
      v-model="showDialog"
      :before-close="close"
      width="800px"
      top="40px"
      append-to-body
    >
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
        :filter-btn="filterInfo.btn"
      />
      <CategoryList
        ref="cateList"
        :categoryList="categoryList"
        :open="showDialog"
        :total="total"
        :showOperations="false"
        :queryParams="queryParams"
        @getListDialog="
          () => {
            emits('getListDialog')
          }
        "
        @select="
          (selection, row) => {
            emits('select', selection, row)
          }
        "
        @handleSelectionChange="
          (selectData) => {
            emits('handleSelectionChange', selectData)
          }
        "
      ></CategoryList>
      <div class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          @click="
            () => {
              emits('submit')
            }
          "
        >
          保存
        </el-button>
        <el-button size="small" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="categoryDialog">
import CategoryList from './categoryList.vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: () => {
      return 0
    },
  },
  queryParams: {
    type: Object,
    default: () => {
      return {}
    },
  },
  categoryList: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const emits = defineEmits([
  'submit',
  'getListDialog',
  'close',
  'select',
  'handleSelectionChange',
])

// 过滤相关配置
const filterInfo = ref({
  query: {},
  copyQuery: {},
  list: [
    {
      componentType: 'input',
      label: '权限组名称',
      value: 'filePortfolioNameLike',
      event: search,
    },
  ],
  btn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    {
      slot: true,
      label: '',
      value: 'sortBtn',
    },
  ],
})

const showDialog = computed({
  get() {
    return props.open
  },
  set(val) {
    emits('update:open', val)
  },
})

onMounted(() => {
  filterInfo.value.copyQuery = proxy.$fn.deepClone(filterInfo.value.query)
})

function clearSearch() {
  filterInfo.value.query = proxy.$fn.deepClone(filterInfo.value.copyQuery)
  search()
}
function search(val) {
  console.log(filterInfo.value.query)
  emits('search', filterInfo.value.query)
}
function close() {
  emits('close')
}
function toogleRow() {
  proxy.$refs.cateList.toogleRow()
}

// 暴露属性，否则在父组件获取不到子组件内的方法
defineExpose({
  toogleRow,
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin: 45px 0 0 0;
}
</style>
